import PropTypes from "prop-types"
import React, { memo, useCallback, useState } from "react"
import SectionHeader from "@/components/section-header"
import SectionTabs from "@/components/section-tabs"
import SectionContent from "@/components/section-content"
import SectionFooter from "@/components/section-footer"

const HomeSectionV2 = memo((props) => {
  let { data } = props

  const tabsData = Object.keys(data.dest_list)

  const [currentCity, setCureentCity] = useState(tabsData[0])
  const tabClickHandle = useCallback(function(index) {
    setCureentCity(tabsData[index])
  },[])

  data = {
    ...data,
    list: data.dest_list[currentCity]?.slice(0, 6) || [],
    itemWidth: 'calc(33.33% - 10px)'
  }

  return (
    <>
      <SectionHeader title={data.title} subTitle={data.subtitle}/>
      <SectionTabs tabsData={tabsData} tabClick={tabClickHandle}/>
      <SectionContent data={data} />
      <SectionFooter data={{}} type={"v2"} currentCity={currentCity}/>
    </>
  )
});

HomeSectionV2.propTypes = {
  data: PropTypes.object
}

export default HomeSectionV2
